<template>
    <div id="player" v-if="detail.length !== 0">
        <div class="player_bg" :style="{backgroundImage:'url(' + detail[0].al.picUrl + ')'}"></div>
        <div class="player_c">
            <!--<audio  ref="audio" id="myaudio"></audio>-->
            <mt-button icon="back" slot="left" @click="goBack()"></mt-button>
            <div class="song_info">
                <div class="song_name">
                    <div class="songn_title">
                        <p class="singername">{{detail[0].name}}</p>
                        <p class="arname">{{detail[0].ar[0].name}}</p>
                    </div>
                </div>
            </div>
            <div class="player_content">
                <div class="playImg" :class="{'circling':playState}">
                    <img :src="detail[0].al.picUrl" alt="">
                </div>
                <!-- 歌词 -->
                <div class="song_lrc">
                    <div class="song_lrc_scroll">
                        <p v-for="(line,index) in songlrc.lines" class="songlrcP" :class="{'current' : currentLineNum === index}">{{line.txt}}</p>
                        <p class="songlrcP current" v-if="!hassonglrc">此歌曲是纯音乐无歌词喔</p>
                    </div>
                </div>
            </div>
            <!-- 进度条-->
            <div id="progress">
                <div class="playTime currentTime">{{timeNow}}</div>
                <div id="progress_bar" @click="tap">
                    <div id="progress_bar_fg"></div>
                    <!--<span class="touchBtn"></span>-->
                    <div class="touchBtn" @touchstart="swipe" @touchend="swipeend"></div>
                </div>
                <div class="playTime allTime">{{formatSongTime(detail[0].dt)}}</div>
            </div>
           <!-- 播放器按钮 -->
            <div class="playBtns">
                <div class="Pbtns prev_btn">
                    <i class="iconfont icon-shangyishou" @click="prevSong()"></i>
                </div>
                <div class="Pbtns play_btn">
                    <i class="iconfont" @click="playOrPause()" :class="{'icon-bofang1':!playState,'icon-pause': playState}"></i>
                </div>
                <div class="Pbtns next_btn">
                    <i class="iconfont icon-xiayishou" @click="nextSong()"></i>
                </div>
            </div>
            <!-- 精彩评论列表 -->
            <div class="hotCom">
                <h3 class="listTitle">精彩评论</h3>
                <div class="com_list">
                    <div class="com_item" v-for="(item,i) in hotComments" :key="i" v-if="i<10">
                        <div class="ci_head">
                            <a class="userphoto">
                                <img :src="item.user.avatarUrl" alt="">
                            </a>
                        </div>
                        <div class="ci_wrap">
                            <div class="ci_title">
                                <div class="ci_meta">
                                    <span class="user_name"><a class="nickname">{{item.user.nickname}}</a></span>
                                    <div class="ci_time">{{formatDate(item.time)}}</div>
                                </div>
                                <div class="ci_like">
                                <span class="ci_likearea">
                                    <span class="ci_count">{{item.likedCount}}</span>
                                    <i class="iconfont icon-zan"></i>
                                </span>
                                </div>
                            </div>
                            <div class="ci_content">{{item.content}}</div>
                        </div>
                    </div>
                </div>
                <div class="getallcom" @click="getallcom()">
                    查看全部{{ctotal}}条评论 <i class="iconfont icon-arrow-right"></i>
                </div>
            </div>
        </div>


    </div>
</template>

<script>
    /* eslint-disable */
    import $ from 'jquery';
    // 引入歌词
    import Lyric from 'lyric-parser'
    export default {
        name: "player",
        data(){
            return {
                id:"",
                detail:[],
                playStateOpen:true,
                playState:true,
                songlrc: {},
                hassonglrc:true,
                hotComments:[],
                ctotal:0,
                songArr:0,
                songArrIndex:0,
                dt:0,
                timeNow:"00:00",
                currentLineNum:0,
                isEnd:true,
                flag:false,
                touchStart:0
            }
        },
        mounted(){
            this.playState = this.$store.state.playState;
            this.playStateOpen = this.$store.state.playState;
            this.id =  this.$route.query.id;
            this.songArr = this.$store.state.list;
            this.songArrIndex = this.$store.state.listIndex;
            if(this.songArr !== undefined){
                console.log(this.songArr)
            }
            this.getSong(this.id);
            this.sound = document.getElementById("sound");
            if(this.sound.getAttribute("songid") == this.$store.state.msg){
                this.flag = false;
            }else{
                this.flag = true;
            }
            if(this.songArr !== undefined){
                this.sound.addEventListener("ended",()=>{
                    this.nextSong();
                })
            }
            if(this.sound.currentTime !== 0){
                if(this.flag){
                    this.play(this.id);
                    this.flag = false;
                }
                this.addEventListeners();
                // this.songlrc.seek(this.sound.currentTime*1000);
                // this.songlrc.play();
            }
        },
        beforeUpdate(){
            if(this.playStateOpen){
                // 如果不设置这个if 每次从home页面进入player的时候就会把歌曲重新播放
                if(this.sound.currentTime == 0){
                    this.play(this.id);
                }
                this.playStateOpen = false;
            }
        },
        beforeDestroy() {
            this.removeEventListeners();
        },
        watch:{
            currentLineNum(val,oldVal){
                var bottomNum = 20 * oldVal + "px";
                document.getElementsByClassName("song_lrc_scroll")[0].style.bottom = bottomNum;
            }
        },
        methods:{
            // 获取歌曲详情
            getSong(id){
                this.axios.get("song/detail?ids="+ id).then(
                    (res)=>{
                        console.log("歌曲详情",res.data.songs);
                        this.detail = res.data.songs;
                    }
                );
                this.axios.get("lyric?id="+ id).then(
                    (res)=>{
                        // console.log("歌词",res.data.lrc);
                        if(res.data.lrc !== undefined){
                            this.songlrc = new Lyric(res.data.lrc.lyric,this.lrcMove);
                            this.hassonglrc = true;
                        }else {
                            this.hassonglrc = false;
                            console.log(this.hassonglrc);
                        }

                    }
                );
                this.axios.get("comment/music?id=" + id+"&limit=1"+"&timestamp=222").then(
                    (res)=>{
                        this.ctotal = res.data.total;
                        this.hotComments = res.data.hotComments;
                        console.log("热门评论",this.hotComments);
                    }
                );
            },
            // 播放
            play(id){
                this.axios.get("music/url?id="+ id).then(
                    (res)=>{
                        try {
                            // 因为后台接口改了 下面的方法用不了 要换字符串拼接的方法
                            // this.$refs.audio.src += res.data.data[0].url;
                            // this.$refs.audio.src="http://music.163.com/song/media/outer/url?id=";
                            // this.$refs.audio.src += id+".mp3";

                            this.sound.src="http://music.163.com/song/media/outer/url?id="+ id+".mp3";
                            this.sound.setAttribute("songid",id);

                        }catch (e){
                            console.log(e)
                        }
                        // this.$refs.audio.play();
                        this.sound.play();
                        this.autoPlayAudio();
                        if(this.hassonglrc){
                            this.currentLineNum = 0;
                            this.songlrc.play();
                        }
                        this.addEventListeners();
                    }
                );
            },
            // 播放暂停按钮
            playOrPause(){
                // vuex中的状态决定播放还是暂停
                if( this.playState == true ){
                    // 暂停
                    // this.$refs.audio.pause();
                    this.sound.pause();
                    this.text = "播放";
                    this.removeEventListeners();
                }else{
                    // 播放
                    // this.$refs.audio.play();
                    this.sound.play();
                    this.text = "暂停";
                    this.addEventListeners();
                }
                if(this.hassonglrc){
                    this.songlrc.togglePlay();
                }
                this.$store.state.playState = !this.$store.state.playState;
                this.playState = this.$store.state.playState;
            },
            // 格式化时间
            formatDate(time){
                // 格式化时间
                var d = new Date(time);
                var year = d.getFullYear();
                var month = d.getMonth()+1;
                var day = d.getDate();

                var myDate = new Date();
                var myYear = myDate.getFullYear();
                var mymonth = myDate.getMonth()+1;
                var myday = myDate.getDate();

                if(myYear == year && mymonth == month && myday == day){
                    return this.formatTime(d);
                }else{
                    return year + "年" + month + "月" + day + "日";
                }
            },
            formatTime(d){
                var hour = d.getHours();
                var min = d.getMinutes();
                if(hour < 10){
                    hour = "0" + hour;
                }
                if(min < 10){
                    min = "0" + min;
                }
                return hour + ":" + min;
            },
            formatSongTime(time){
                var d = new Date(time);
                var sec = d.getSeconds();
                var min = d.getMinutes();
                this.dt = (min*60) + sec;
                if(sec < 10){
                    sec = "0" + sec;
                }
                if(min < 10){
                    min = "0" + min;
                }
                return min + ":" + sec;
            },
            formatcurrenTime(sec){
                var min = 0;
                if(sec >= 60){
                    min = parseInt(sec/60);
                    sec = parseInt(sec%60);
                }
                if(sec < 10){
                    sec = "0" + sec;
                }
                if(min < 10){
                    min = "0" + min;
                }
                return min + ":" + sec;
            },
            // 获取全部评论
            getallcom(){
                console.log("还没获取全部评论功能");
            },
            // 上一首
            prevSong(){
                if(this.songArrIndex == 0){
                    this.songArrIndex = this.songArr.length;
                }
                this.id = this.songArr[ --this.songArrIndex ].id;
                this.$store.state.msg = this.id;
                this.$store.state.listIndex = this.songArrIndex;
                this.changeSong();
            },
            // 下一首
            nextSong(){
                if(this.songArrIndex == this.songArr.length-1){
                    this.songArrIndex = -1;
                }
                this.id = this.songArr[ ++this.songArrIndex ].id;
                this.$store.state.msg = this.id;
                this.$store.state.listIndex = this.songArrIndex;
                this.changeSong();
            },
            // 换歌
            changeSong(){
                if(this.hassonglrc){
                    this.songlrc.stop();
                    this.songlrc = {};
                }
                document.getElementsByClassName("song_lrc_scroll")[0].style.bottom = "-20px";
                this.getSong(this.id);
                this.play(this.id);
                this.autoPlayAudio();
                this.playState = true;
                this.$store.state.playState = this.playState ;

            },
            // 兼容ios播放
            autoPlayAudio() {
                wx.config({
                    // 配置信息, 即使不正确也能使用 wx.ready
                    debug: false,
                    appId: '',
                    timestamp: 1,
                    nonceStr: '',
                    signature: '',
                    jsApiList: []
                });
                wx.ready(function() {
                    document.getElementById('sound').play();
                });
            },
            // 进度条
            tap(e){
                this.removeEventListeners();
                var p = ((e.offsetX / e.currentTarget.clientWidth)*100).toFixed(2);
                var sec = (p*this.dt)/100;
                $("#progress_bar_fg")[0].style.width = p + "%";
                $(".touchBtn")[0].style.left = (p-0.5) + "%";
                console.log("秒数",sec);
                this.sound.currentTime = sec;
                this.songlrc.seek(this.sound.currentTime*1000);
                this.addEventListeners();
            },
            swipe(e){
                this.removeEventListeners();
                console.log("滑动了",e.changedTouches[0].clientX);
                this.touchStart = e.changedTouches[0].clientX;
            },
            swipeend(e){
                console.log("结束滑动",e);
                let rec = e.changedTouches[0].clientX - this.touchStart;
                let btnPos,winWidth;
                if(rec >= 0){
                    btnPos = e.changedTouches[0].clientX;
                }else{
                    btnPos = this.touchStart + rec;
                }
                // 获取窗口宽度
                if (window.innerWidth){
                    winWidth = window.innerWidth;
                }
                else if ((document.body) && (document.body.clientWidth)){
                    winWidth = document.body.clientWidth;
                }
                var p = ((btnPos / winWidth)*100).toFixed(2);
                var sec = (p*this.dt)/100;
                $("#progress_bar_fg")[0].style.width = p + "%";
                $(".touchBtn")[0].style.left = (p-0.5) + "%";
                this.sound.currentTime = sec;
                this.songlrc.seek(this.sound.currentTime*1000);
                this.addEventListeners();

            },
            addEventListeners: function () {
                const self = this;
                // self.$refs.audio.addEventListener('timeupdate', self._currentTime);
                this.sound.addEventListener('timeupdate', self._currentTime);
            },
            removeEventListeners: function () {
                const self = this;
                // self.$refs.audio.removeEventListener('timeupdate', self._currentTime);
                this.sound.removeEventListener('timeupdate', self._currentTime);
            },
            _currentTime: function () {
                const self = this;
                var sec = parseInt(this.sound.currentTime);
                self.timeNow = self.formatcurrenTime(sec);
                this.progressMove(sec);
            },
            progressMove(sec){
                var p = ((sec / this.dt)*100).toFixed(2);
                $("#progress_bar_fg")[0].style.width = p + "%";
                $(".touchBtn")[0].style.left = (p-0.5) + "%"
            },
            // 歌词
            lrcMove({lineNum,txt}){
                this.currentLineNum = lineNum;
                // console.log("当前行",this.currentLineNum);
            }

        }
    }
</script>

<style scoped lang="scss">
    #player{
        position: relative;
        width: 100%;
        height: 100%;
        .player_bg{
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            z-index: 1;
            background-repeat: no-repeat;
            background-size: auto 100%;
            background-position: 50%;
            filter: blur(20px);
            transform: scale(1.5);
        }
        .player_bg:after{
            content: "";
            background-color: rgba(0,0,0,0.25);
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            z-index: 1;
        }
        .player_c{
            position: relative;
            z-index: 2;
            .song_info{
                .song_name{
                    color: #fff;
                    padding: 10vw 35px 0;
                    margin-top: 6vw;
                    .songn_title{
                        font-size: 18px;
                        text-align: center;
                        line-height: 1.1;
                        color: #fefefe;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        .singername{
                            font-size: 19px;
                        }
                        .arname{
                            font-size: 13px;
                            color: hsla(0,0%,100%,.6);
                            margin-top: 20px;
                            position: relative;
                        }
                        .arname:after,.arname:before{
                            position: absolute;
                            top: 50%;
                            content: "";
                            width: 5%;
                            height: 10%;
                            background-color: rgba(255, 255, 255, 0.6);
                        }
                        .arname:before{
                            left: 30%;
                        }
                        .arname:after{
                            right: 30%;
                        }
                    }
                }
            }
            .player_content{
                .playImg{
                    width: 60vw;
                    height: 60vw;
                    margin: 8vw auto 10vw auto;
                    padding: 10px;
                    img{
                        width: 100%;
                        border-radius: 50%;
                    }
                }
                .circling{
                    -webkit-animation: circling 20s infinite linear forwards;
                    -o-animation: circling 20s infinite linear forwards;
                    animation: circling 20s infinite linear forwards;
                }
                .song_lrc{
                    width: 70vw;
                    height: 60px;
                    overflow: hidden;
                    margin: 0 auto;
                    text-align: center;
                    position: relative;
                    .song_lrc_scroll{
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        bottom: -5vw;
                        .songlrcP{
                            color: #cccccc;
                            font-size: 16px;
                            height: 20px;
                        }
                        .current{
                            color: red;
                        }
                    }

                }
            }
            .playBtns{
                width: 100%;
                margin: 6vw auto 35vw auto;
                .Pbtns{
                    font-size: 24px;
                    display: inline-block;
                    width: 20vw;
                    height: 20vw;
                    line-height: 20vw;
                    text-align: center;
                    vertical-align: middle;
                    i{
                        /*color: #515151;*/
                        color: #f2f2ed;
                        font-size: 38px;
                    }
                }
                .play_btn{
                    margin: 0 30px;
                    i{
                        font-size: 51px;
                    }
                    .icon-pause{
                        font-size: 60px;
                    }
                }
            }
        }
        .listTitle{
            position: relative;
            text-align: left;
            height: 25px;
            line-height: 25px;
            padding: 0 0 0 10px;
            font-size: 16px;
            color: #fff;
            background-color: transparent;
        }
        .listTitle:after{
            content: "";
            display: block;
            width: 2px;
            height: 16px;
            position: absolute;
            top: 4px;
            left: 0;
            background: #d33a31;
        }
        .com_list{
            .com_item{
                padding-top: 10px;
                width: 100%;
                display: flex;
                -webkit-box-orient: horizontal;
                -webkit-box-direction: normal;
                flex-direction: row;
                .ci_head{
                    height: 35px;
                    margin: 0 10px;
                    -webkit-box-flex: 0;
                    flex: none;
                    .userphoto{
                        position: relative;
                        display: block;
                        color: #507daf;
                        text-decoration: none;
                        cursor: pointer;
                        img{
                            display: block;
                            border-radius: 50%;
                            width: 30px;
                            height: 30px;
                        }
                    }
                }
                .ci_wrap{
                    padding: 0 10px 11px 0;
                    -webkit-box-flex: 1;
                    -moz-box-flex: 1;
                    -ms-box-flex: 1;
                    box-flex: 1;
                    flex: auto;
                    width: 0;
                    position: relative;
                    border-bottom: 1px solid rgba(0,0,0,0.1);
                    .ci_title{
                        display: flex;
                        -webkit-box-orient: horizontal;
                        -webkit-box-direction: normal;
                        flex-direction: row;
                        .ci_meta{
                            text-align: left;
                            -webkit-box-flex: 1;
                            flex: auto;
                            width: 0;
                            font-size: 0;
                            .user_name{
                                width: 100%;
                                display: inline-block;
                                .nickname{
                                    font-size: 14px;
                                    color: hsla(0,0%,100%,.7);;
                                    line-height: 28px;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                    flex: auto;
                                    -webkit-box-flex: 1;
                                }
                            }
                            .ci_time{
                                font-size: 12px;
                                color: hsla(0,0%,100%,.3);;
                            }
                        }
                        .ci_like{
                            width: 65px;
                            height: 22px;
                            line-height: 22px;
                            font-size: 12px;
                            color: #999;
                            flex: none;
                            -webkit-box-flex: 0;
                            text-align: right;
                            .ci_likearea{
                                display: inline-block;
                                min-width: 30px;
                                padding-left: 5px;
                                vertical-align: middle;
                                .ci_count{
                                    vertical-align: sub;
                                }
                                i{
                                    display: inline-block;
                                    width: 14px;
                                    height: 14px;
                                    line-height: 0;
                                    vertical-align: sub;
                                    cursor: pointer;
                                    font-size: 18px;
                                }
                            }
                        }
                    }
                    .ci_content{
                        text-align: left;
                        color: #fff;
                        font-size: 15px;
                        line-height: 22px;
                        margin-top: 5px;
                        vertical-align: middle;
                    }
                }
            }
        }
        .getallcom{
            margin: 0 auto;
            position: relative;
            padding: 18px 0;
            font-size: 14px;
            color: #fff;
            text-align: center;
            line-height: 1;

        }
        /* 进度条 */
        #progress{
            width: 60vw;
            height: 2vw;
            line-height: 2vw;
            position: relative;
            margin: 5vw auto 0 auto;

            #progress_bar{
                width: 100%;
                height: 100%;
                background-color: #ccc;
                border-radius: 8px;
                position: relative;

                #progress_bar_fg{
                    width: 0;
                    height: 100%;
                    background-color: orangered;
                    border-top-left-radius: 8px;
                    border-bottom-left-radius: 8px;
                }
            }
            .playTime{
                color: #fff;
                position: absolute;
                top: 0;
            }
            .currentTime{
                left: -13vw;
            }
            .allTime{
                right: -13vw;
            }
            .touchBtn{
                width: 3vw;
                height: 3vw;
                background-color: orangered;
                position: absolute;
                left: 0;
                top: -0.5vw;
                -webkit-border-radius: 50%;
                border-radius: 50%;
                cursor: pointer;
            }
        }
    }

@keyframes circling {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(1turn);
    }
}

@media screen and (min-width: 375px){
    #player .player_c .player_content .song_info .song_name .songn_title .arname{
        font-size: 16px;
    }
}

</style>